<template>
	<div class="home">
	
		<el-col :span="16">
	      <div class="row">
                <div class="col-md-12">
                  <el-row class="art-item">
															<el-card shadow="hover" v-for="(val,key) in articles" :key="key">
																<h5><el-button tag="span" class="art-title" >{{val.article.title}}</el-button></h5>
															<el-row class="art-info d-flex align-items-center justify-content-start">
																	<div class="art-time"><i class="el-icon-time"></i>：{{val.article.time}}</div>
																	<div class="d-flex align-items-center"><img class="tag" src="../assets/tag.png" />：
																		
															<el-tag size="mini" v-for="(label,i) in val.article.labels" :key="i" @click.native="searchByLabel(label)">{{label}}</el-tag>
																	</div>
																</el-row>
																<el-row class="art-body">
														   
																	<div class="side-img hidden-sm-and-down"><img v-bind:src="'http://127.0.0.1:7071/static/'+val.article.cover" class="art-banner"></div>
																	<div class="side-abstract">
																		<div class="art-abstract">
																		<!--	{{val.article.text.length>70?val.article.text.slice(0,69)+"...":val.article.text}}-->

		
																			
																		</div>
																	
																		<div class="art-more">
													作者：<el-button  @click="searchByName(val.article.author)">{{val.article.authorName}}</el-button>
																				<el-button plain @click="readview(val.article._id)">阅读全文</el-button>
																
																			
    								<!--<el-button v-if="val.thumbs==null" class="img-btn notthumbs" @click="notLogin(val.article._id)"></el-button>{{val.article.thumbs}}--> 
																			<div class="view"><i class="el-icon-view"></i>{{val.article.count}}</div>
																		</div>
																	</div>
																</el-row>
															</el-card>
														</el-row>
                </div>
            </div>
		</el-col>



	</div>
</template>

<script>
	import friend from '../components/friend'
	import tag from '../components/tag'
	import $ from 'jquery'
	import 'bootstrap'
	export default {
		name: 'home',
		components: {
			friend,
			tag
		},
		data: function(){
			return{
			/*title: '',
			count: '',
			cover: '',
		  labels: [],
		  author: '',
		  text: '',
		  thumbs: '',
			uploadTime :''*/
		
			articles: ''
			}
		
	},
	mounted: function(){
		
			this.getData();
	},
	methods: {
		searchByName: function(e){
			
				this.$router.push(
			 '/userpage/'+e
			);
			console.log(e)},
		searchByLabel : function(e){console.log(e)},
		readview: function(e){
     console.log(e)
		      this.$router.push('/View/'+e);
	},

		    notLogin: function(e){
              console.log(e)
			},
			getData: function(){

			this.$axios.get('/article/matching',  {
       headers: {
						'Authorization': localStorage.getItem('auth')
				}

      }).then
			 (
          resp => {
						this.articles=resp.data.data
          console.log(resp.data.data)
          }
          ).catch(err => {
            console.log(err);
          })
			}
		}
	}

/*	$(function(){

function buid_emps_table(d){
	// $("#emps_table tbody").empty();
	 //console.log(d[1].article.title)
	for(var i=0;i<d.length;i++){
		var title= d[i].article.title
		var count= d[i].article.count
		var cover= d[i].article.cover
		var labels=d[i].article.labels
		var author=d[i].article.author
		var text=d[i].article.text
		var thumbs=d[i].article.thumbs
		var uploadTime=d[i].article.uploadTime
		var fream=$("<td><el-row class='art-item'><el-card shadow='hover'></el-card></el-row></td>")
		var title=$("<h5></h5>").append("<a href='http://127.0.0.1:8080/article'"+title+"</router-link>")
		var td=fream.append(title)

        $("<tr></tr>").append(td).appendTo("#emps_table tbody")

	//	var label= d[i].label

	}
}

		
		$.ajax('http://127.0.0.1:9004/article/matching',{
			headers: {
       Accept: "application/json; charset=utf-8",
       Authorization: localStorage.getItem('auth')
			},
			type: "get",
			async: true,
	
        success:function (data) {
					
					var d =data.data

					//buid_emps_table(d);

				}
		})
	})*/
</script>

<style scoped>
	#side .item {
		margin-bottom: 30px;
	}
	
	.art-item {
		margin-bottom: 30px;
		position: relative;
	}
	
	.art-item .star {
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	img.tag {
		width: 16px;
		height: 16px;
	}
	
	.art-title {
		border-left: 3px solid #F56C6C;
		padding-left: 5px;
		cursor: pointer;
	}
	
	.art-title:hover {
		padding-left: 10px;
		color: #409EFF;
	}
	
	.art-time {
		margin-right: 20px;
	}
	
	.art-body {
		display: flex;
		padding: 10px 0;
	}
	
	.side-img {
		height: 150px;
		width: 270px;
		overflow: hidden;
		margin-right: 10px;
	}
	
	img.art-banner {
		width: 100%;
		height: 100%;
		transition: all 0.6s;
	}
	
	img.art-banner:hover {
		transform: scale(1.4);
	}
	
	.side-abstract {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.art-abstract {
		flex: 1;
		color: #aaa;
	}
	
	.art-more {
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.art-more .view {
		color: #aaa;
	}
	h5{
		font-size: 18px;
	}
	.pagination {
		background-color: #F9F9F9;
	}
	.notthumbs{
		background-image: url('../assets/notthumbs.png');
		background-size: cover;
		width: 20px;
		height: 38px;

	}
</style>